<template>
    <div class='input'>
        <slot name="left"></slot>
        <input type="text" v-model="list" @keydown.13="add">
    </div>
</template>
<script>
import { defineComponent,ref, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 export default defineComponent({
setup(props, {emit}) {
         let task = ref('')
         function add() {
             emit('addTask', {
                 name: task.value,
            complete:false
             })
        //清空输入框
        task.value = ''
    }

return { task,add };
 },
 });
</script>

<style lang='scss'>
.input{
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    input{
        width: 300px;
        height: 25px;
        margin-left: 100px;
        border-radius: 10px;
    }
}
</style>
